<template>
  <el-container class="layout-ltb">
    <el-aside width="320px" class="p-[15px]">
      <div
        v-for="(item, index) in pointData"
        :key="index"
        :class="{ active: currentIndex == index }"
        @click="f_ClickDeviceCategory(item, index)"
        class="font-size-[14px]"
      >
        <img
          v-if="item.image == 1"
          :src="deviceIcon1"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 2"
          :src="deviceIcon2"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 3"
          :src="deviceIcon3"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 4"
          :src="deviceIcon4"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 5"
          :src="deviceIcon5"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 6"
          :src="deviceIcon6"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 7"
          :src="deviceIcon7"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 8"
          :src="deviceIcon8"
          class="device-icon menu"
        />

        <img
          v-if="item.image == 9"
          :src="deviceIcon9"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 10"
          :src="deviceIcon10"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 11"
          :src="deviceIcon11"
          class="device-icon menu"
        />

        <img
          v-if="item.image == 12"
          :src="deviceIcon12"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 13"
          :src="deviceIcon13"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 14"
          :src="deviceIcon14"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 15"
          :src="deviceIcon15"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 16"
          :src="deviceIcon1"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 17"
          :src="deviceIcon17"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 18"
          :src="deviceIcon18"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 19"
          :src="deviceIcon19"
          class="device-icon menu"
        />
        <img
          v-if="item.image == 20"
          :src="deviceIcon20"
          class="device-icon menu"
        />

        {{ item.className }}
      </div>
    </el-aside>
    <el-container>
      <el-header height="114">
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          size="default"
          label-position="right"
          class="search-form mt-[20px]"
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <span class="v-sub font-bold text-[18px]">{{
                currentDeviceData.className
              }}</span>

              <span class="v-middle">
                <el-radio-group
                  class="ml-[30px]"
                  v-model="currentDeviceData.showModule"
                  @change="f_ChangeInControl"
                >
                  <el-radio value="Pipe">驾驶舱-管网监测</el-radio>
                  <el-radio value="Device">驾驶舱-设备监测</el-radio>
                </el-radio-group>
              </span>
            </el-col>
            <el-col :span="14">
              <el-button
                @click="f_OpenDialogBatchReport"
                type="danger"
                class="ml-[20px] float-right pl-[20px!important] pr-[20px!important] h-[30px!important] float-right"
              >
                <i-ep-setting
                  class="mr-[2px] text-size-[11px] v-bottom"
                />批量设置报警值
              </el-button>
              <el-button
                @click="f_HandelQueryList(true)"
                type="primary"
                class="ml-[20px] float-right pl-[20px!important] pr-[20px!important] h-[30px!important] float-right"
              >
                <i-ep-search class="mr-[2px] text-size-[11px] v-bottom" />查询
              </el-button>
              <el-form-item
                label="搜索:"
                style="float: right; width: 280px; margin-right: 20px"
              >
                <el-input
                  v-model="queryVal"
                  placeholder="请输入管点名称/GIS编号搜索"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mb-[8px] mt-[12px]">
            <el-col :span="3" class="text-left">
              <el-link
                @click="f_ChangeTab('')"
                type="primary"
                class="pl-[8px!important]"
                :class="{ active: activeTab == '' }"
                >全部（{{ totalNumber }}）</el-link
              >
            </el-col>
            <el-col :span="3">
              <el-link
                @click="f_ChangeTab('1')"
                type="primary"
                class="pl-[8px!important]"
                :class="{ active: activeTab == '1' }"
                ><b class="dot blue"></b>正常（{{
                  f_GetStatusNumber("1")
                }}）</el-link
              >
            </el-col>
            <el-col :span="3">
              <el-link
                @click="f_ChangeTab('2')"
                type="primary"
                class="pl-[8px!important]"
                :class="{ active: activeTab == '2' }"
                ><b class="dot red"></b>报警（{{
                  f_GetStatusNumber("2")
                }}）</el-link
              >
            </el-col>
            <el-col :span="3">
              <el-link
                @click="f_ChangeTab('3')"
                type="primary"
                class="pl-[8px!important]"
                :class="{ active: activeTab == '3' }"
                ><b class="dot grey"></b>离线（{{
                  f_GetStatusNumber("3")
                }}）</el-link
              >
            </el-col>
            <el-col :span="3">
              <el-link
                @click="f_ChangeTab('5')"
                type="primary"
                class="pl-[8px!important]"
                :class="{ active: activeTab == '5' }"
                ><box-icon
                  color="#ffe000"
                  size="16px"
                  name="star"
                  class="mr-[2px] mt-[-4px!important]"
                />
                我的关注（{{ f_GetStatusNumber("5") }}）</el-link
              >
            </el-col>
            <el-col :span="5" class="text-right">
              <el-button @click="f_OpenDialogReport" type="primary" size="small"
                >设备上报数据<i-ep-plus
                  class="ml-[2px] text-size-[11px] v-bottom"
              /></el-button>
            </el-col>
            <el-col :span="4" class="text-right">
              <el-button-group>
                <el-button
                  :type="showType == 'block' ? 'primary' : ''"
                  size="small"
                  @click="f_ChangeShowType('block')"
                  >卡片展示</el-button
                >
                <el-button
                  :type="showType == 'table' ? 'primary' : ''"
                  size="small"
                  @click="f_ChangeShowType('table')"
                >
                  列表展示
                </el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </el-form>

        <el-row :gutter="20">
          <el-col :span="6" />
        </el-row>
      </el-header>
      <el-main>
        <div>
          <el-table
            v-if="tableData.length && showType == 'table'"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            ref="tableRef"
            size="small"
          >
            <el-table-column type="selection" width="60" align="center" />
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column prop="pointName" label="管点名称" align="center">
              <template #default="scope">
                <span style="color: #2196f3" @click="f_OpenEchart(scope.row)">{{
                  scope.row.pointName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="pointGisNo"
              label="数据采集编号"
              align="center"
            >
              <template #default="scope">
                {{ f_GetNo(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="pointGisNo"
              label="管点GIS编号"
              align="center"
            />
            <el-table-column prop="geom" label="坐标位置" align="center">
              <template #default="scope">
                {{
                  scope.row.geom
                    ? scope.row.geom
                        .replace("POINT (", "")
                        .replace(")", "")
                        .replace(" ", ",")
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in attrTitleData"
              :key="index"
              :prop="'attr' + index"
              width="160"
              :label="item"
              align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span
                  :style="{
                    color: f_Waring(scope.$index, scope.row, index)
                      ? 'red'
                      : '',
                  }"
                  >{{ scope.row["attr" + index] }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="上传时间" align="center">
              <template #default="scope">
                {{
                  scope.row.receiveTime
                    ? moment(scope.row.receiveTime).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                    : "-"
                }}
              </template>
            </el-table-column>
          </el-table>
          <div v-if="tableData.length && showType == 'block'" class="block">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="item in tableData"
                :key="item.pointGisNo"
              >
                <el-card class="mb-[15px]">
                  <div>
                    <img
                      v-if="currentDeviceData.image == 1"
                      :src="deviceIcon1"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 2"
                      :src="deviceIcon2"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 3"
                      :src="deviceIcon3"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 4"
                      :src="deviceIcon4"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 5"
                      :src="deviceIcon5"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 6"
                      :src="deviceIcon6"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 7"
                      :src="deviceIcon7"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 8"
                      :src="deviceIcon8"
                      class="device-icon menu"
                    />

                    <img
                      v-if="currentDeviceData.image == 9"
                      :src="deviceIcon9"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 10"
                      :src="deviceIcon10"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 11"
                      :src="deviceIcon11"
                      class="device-icon menu"
                    />

                    <img
                      v-if="currentDeviceData.image == 12"
                      :src="deviceIcon12"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 13"
                      :src="deviceIcon13"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 14"
                      :src="deviceIcon14"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 15"
                      :src="deviceIcon15"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 16"
                      :src="deviceIcon1"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 17"
                      :src="deviceIcon17"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 18"
                      :src="deviceIcon18"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 19"
                      :src="deviceIcon19"
                      class="device-icon menu"
                    />
                    <img
                      v-if="currentDeviceData.image == 20"
                      :src="deviceIcon20"
                      class="device-icon menu"
                    />

                    <b @click="f_OpenEchart(item)">{{ item.pointName }}</b>
                    <span
                      class="float-right cursor-pointer"
                      @click="f_Star(item)"
                    >
                      <box-icon
                        v-if="!item.myId"
                        color="#ffe000"
                        size="20px"
                        name="star"
                        class="mr-[2px] mt-[-4px!important]"
                      />
                      <box-icon
                        v-else
                        type="solid"
                        color="#ffe000"
                        size="20px"
                        name="star"
                        class="mr-[2px] mt-[-4px!important]"
                      />
                    </span>
                  </div>
                  <div>
                    {{ item.pointGisNo }}
                    <span>{{
                      moment(item.updateTime).format("YYYY-MM-DD HH:mm:ss")
                    }}</span>
                    <el-row>
                      <template
                        v-for="ele in deviceReportData"
                        :key="ele.AttrName"
                      >
                        <el-col :span="12" v-if="ele.IsShow"
                          >{{ ele.AttrName }}:{{
                            f_GetAttrValue(item, ele)
                          }}</el-col
                        >
                      </template>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <noneData :noneShow="!tableData.length" :height="tableHeight" />
          <pagination
            size="small"
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize"
            @pagination="f_HandelQueryList"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 批量设置报警值 弹框 -->
    <el-dialog
      v-model="dialogBatchSet.visible"
      title="批量设置报警值"
      width="800px"
      @close="f_CloseDialog"
    >
      <div class="p-[20px]">
        <el-table
          :data="batchData"
          border
          header-row-class-name="table-header"
          size="small"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column
            label="属性名称"
            prop="AttrName"
            align="center"
            width="160"
          />
          <el-table-column label="报警范围" align="center">
            <template #default="scope">
              <el-input
                class="w-[100px]"
                placeholder="请输入"
                v-model="scope.row.StartVal"
              />
              ~
              <el-input
                class="w-[100px]"
                placeholder="请输入"
                v-model="scope.row.EndVal"
              />
              <el-radio-group v-model="scope.row.TypeName" class="ml-[30px]">
                <el-radio value="范围内">范围内</el-radio>
                <el-radio value="范围外">范围外</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer pb-[15px] mt-[-20px] pr-[15px]">
          <el-button type="primary" @click="f_HandleSubmitBatchReport"
            >确 定</el-button
          >
          <el-button @click="f_CloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 设置上报数据 弹框 -->
    <el-dialog
      v-model="dialogDeviceReport.visible"
      title="设备上报数据"
      width="800px"
      @close="f_CloseDialog"
    >
      <div class="p-[20px]">
        <el-table
          :data="deviceReportData"
          border
          header-row-class-name="table-header"
          size="small"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column prop="planSetType" label="是否展示" align="center">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.IsShow"
                label=""
                size="large"
                @change="f_Change(scope.row, scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="属性名称" prop="AttrName" align="center" />
          <el-table-column label="标识符" prop="AttrKey" align="center" />
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer pb-[15px] mt-[-20px] pr-[15px]">
          <el-button type="primary" @click="f_HandleSubmitReport"
            >确 定</el-button
          >
          <el-button @click="f_CloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详细数据 弹框 -->
    <el-drawer
      v-model="dialog.visible"
      title="设备上报数据"
      size="1200px"
      @close="f_CloseDialog"
      class="bg-[#f5f5f5!important]"
    >
      <detail_drawer />
    </el-drawer>
  </el-container>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import { find } from "lodash";
import moment from "moment";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import detail_drawer from "./detail.vue";
let tableHeight = ref(0);
const deviceStatusData = ref([]);
const currentIndex = ref(0);
const dialog = reactive({
  visible: false,
});
const dialogBatchSet = reactive({
  visible: false,
});
const dialogDeviceReport = reactive({
  visible: false,
});
const attrTitleData = ref([]);
const queryFormRef = ref(ElForm);
const formRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const activeTab = ref("");
const currentDeviceData = ref({});
const tableRef = ref();
const totalNumber = ref(0);
const showType = ref("block");
// 管点
const pointData = ref([]);
const queryParams = reactive({
  pageIndex: 1,
  pageSize: 10,
});
const queryVal = ref("");

// 批量设置
const batchData = ref([]);

// 设备上报数据
const deviceReportData = ref([]);

const deviceIcon1 = ref(
  new URL(`../../../assets/device/1.png`, import.meta.url).href
);
const deviceIcon2 = ref(
  new URL(`../../../assets/device/1.png`, import.meta.url).href
);
const deviceIcon3 = ref(
  new URL(`../../../assets/device/2.png`, import.meta.url).href
);
const deviceIcon4 = ref(
  new URL(`../../../assets/device/3.png`, import.meta.url).href
);
const deviceIcon5 = ref(
  new URL(`../../../assets/device/4.png`, import.meta.url).href
);
const deviceIcon6 = ref(
  new URL(`../../../assets/device/5.png`, import.meta.url).href
);
const deviceIcon7 = ref(
  new URL(`../../../assets/device/6.png`, import.meta.url).href
);
const deviceIcon8 = ref(
  new URL(`../../../assets/device/7.png`, import.meta.url).href
);
const deviceIcon9 = ref(
  new URL(`../../../assets/device/9.png`, import.meta.url).href
);
const deviceIcon10 = ref(
  new URL(`../../../assets/device/10.png`, import.meta.url).href
);
const deviceIcon11 = ref(
  new URL(`../../../assets/device/11.png`, import.meta.url).href
);
const deviceIcon12 = ref(
  new URL(`../../../assets/device/12.png`, import.meta.url).href
);
const deviceIcon13 = ref(
  new URL(`../../../assets/device/13.png`, import.meta.url).href
);
const deviceIcon14 = ref(
  new URL(`../../../assets/device/14.png`, import.meta.url).href
);
const deviceIcon15 = ref(
  new URL(`../../../assets/device/15.png`, import.meta.url).href
);
const deviceIcon16 = ref(
  new URL(`../../../assets/device/16.png`, import.meta.url).href
);
const deviceIcon17 = ref(
  new URL(`../../../assets/device/17.png`, import.meta.url).href
);
const deviceIcon18 = ref(
  new URL(`../../../assets/device/18.png`, import.meta.url).href
);
const deviceIcon19 = ref(
  new URL(`../../../assets/device/19.png`, import.meta.url).href
);
const deviceIcon20 = ref(
  new URL(`../../../assets/device/20.png`, import.meta.url).href
);

// change
function f_Change(data, index) {
  let checkNum = 0;
  deviceReportData.value.forEach((item) => {
    if (item.IsShow) {
      checkNum++;
    }
  });

  if (checkNum > 4) {
    deviceReportData.value[index].IsShow = false;
    ElMessage.error("最多选择展示4项上报属性！");
  }
}

// 返回数据采集编号
function f_GetNo(data) {
  let pointAttribute = [];
  let num = "";
  if (typeof data.pointAttribute == "string") {
    pointAttribute = JSON.parse(data.pointAttribute);
  } else {
    pointAttribute = data.pointAttribute;
  }
  if (pointAttribute && pointAttribute.length) {
    pointAttribute.forEach((item) => {
      if (item.attr == "数据采集编号") {
        num = item.value;
      }
    });
  }
  return num;
}

// 折线图
function f_OpenEchart() {
  dialog.visible = true;
}

// 关注 添加、删除
function f_Star(data: any) {
  if (!data.myId) {
    const params = {
      deviceId: data.pointId,
      deviceName: data.classId,
    };
    DeviceCategoryApi.api_attention_add(params).then(
      ({ errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("更新成功！");
          f_HandelQueryList(true);
          f_HandelQueryDeviceStatus();
          if (activeTab.value == "5") {
            f_HandelQueryListStar();
          }
        } else {
          ElMessage.error(errors);
        }
      }
    );
  } else {
    const params = {
      id: data.attentionId,
    };
    DeviceCategoryApi.api_attention_del(params).then(
      ({ errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("更新成功！");
          f_HandelQueryList(true);
          f_HandelQueryDeviceStatus();
          if (activeTab.value == "5") {
            f_HandelQueryListStar();
          }
        } else {
          ElMessage.error(errors);
        }
      }
    );
  }
}

// 改变列表的展示形式
function f_ChangeShowType(val: string) {
  showType.value = val;
}

// 切换是否在驾驶舱显示
function f_ChangeInControl() {
  ElMessageBox.confirm(
    "请重新打开驾驶舱查看效果！",
    "确认切换该设备类型在驾驶舱页面中显示吗？",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      const params = {
        id: pointData.value[currentIndex.value].id,
        classId: pointData.value[currentIndex.value].classId,
        showModule: currentDeviceData.value.showModule,
      };
      DeviceCategoryApi.api_update_show_module(params).then(
        ({ data, errors, succeeded }) => {
          if (succeeded) {
            f_HandelQuery();
            ElMessage.success("操作成功！");
          }
        }
      );
    })
    .catch(() => {
      currentDeviceData.value.showModule =
        currentDeviceData.value.showModule == "Pipe" ? "Device" : "Pipe";
    });
}

// 返回图片
function f_GetPath(index: number) {
  return new URL("../../../assets/device/" + index + ".png", import.meta.url)
    .href;
}

// 点击切换
function f_ChangeTab(val) {
  activeTab.value = val;
  if (activeTab.value == "5") {
    f_HandelQueryListStar();
  } else {
    f_HandelQueryList(true);
  }
}

//表格数据
const tableData = ref([]);

// 点击左侧设备
function f_ClickDeviceCategory(data: any, index: number) {
  currentIndex.value = index;
  currentDeviceData.value = data;
  activeTab.value = "";
  f_HandelQueryList(false);
  f_HandelQueryDeviceStatus();
}

// 查询
function f_HandelQuery(flag) {
  loading.value = true;
  const params1 = {
    pageSize: 100,
    pageIndex: 1,
    pClassId: "01",
    isCollection: true,
  };
  DeviceCategoryApi.api_query(params1).then(({ data, errors, succeeded }) => {
    if (succeeded) {
      pointData.value = data.items;
      if (pointData.value.length) {
        currentDeviceData.value = pointData.value[currentIndex.value];
        f_HandelQueryList(false);
        f_HandelQueryDeviceStatus();
      }
    }

    loading.value = false;
  });
}

// 返回对应状态的设备数量
function f_GetStatusNumber(statusStr) {
  let deviceNumber = 0;
  let data = find(deviceStatusData.value, { deviceStatus: statusStr });
  if (data) {
    deviceNumber = data.num;
  }
  return deviceNumber;
}

// 查询
function f_HandelQueryDeviceStatus() {
  totalNumber.value = 0;
  const params = {
    pageSize: 1000,
    pageIndex: 1,
    classId: currentDeviceData.value.classId,
  };
  GisPointInfoAPI.api_query_device_status(params).then(
    ({ data, errors, succeeded }) => {
      if (succeeded) {
        deviceStatusData.value = data;
        data.forEach((item) => {
          if (item.deviceStatusName != "我的关注") {
            totalNumber.value += item.num;
          }
        });
      }
    }
  );
}

// 查询 设备对应的明细
function f_HandelQueryList(flag) {
  attrTitleData.value = [];
  loading.value = true;
  const params = {
    pageSize: queryParams.pageSize,
    pageIndex: queryParams.pageIndex,
    classId: currentDeviceData.value.classId,
  };
  if (activeTab.value) {
    params.deviceStatus = Number(activeTab.value);
  }
  if (flag && queryVal.value.length) {
    params.queryVal = queryVal.value;
  }
  GisPointInfoAPI.api_query_device_status_receivejson(params).then(
    ({ data, succeeded }) => {
      if (succeeded) {
        tableData.value = data.items;
        total.value = data.totalCount;
        if (!Object.keys(currentDeviceData.value.colAttribute).length) {
          return;
        }
        deviceReportData.value = currentDeviceData.value.colAttribute
          ? currentDeviceData.value.colAttribute
          : [];

        tableData.value.forEach((ele, index) => {
          let num = 0;
          currentDeviceData.value.colAttribute.forEach((item) => {
            // if (item.IsShow) {
            if (!index) {
              attrTitleData.value.push(item.AttrName);
            }
            if (ele.receiveJson) {
              tableData.value[index]["attr" + num] = JSON.parse(
                ele.receiveJson
              )[item.AttrKey];
            } else {
              tableData.value[index]["attr" + num] = "";
            }

            num++;
            // }
          });
        });
      }
    }
  );
}

// 返回相应属性的值
function f_GetAttrValue(data, data1) {
  if (data.receiveJson && data.receiveJson.length > 0) {
    let tmp = JSON.parse(data.receiveJson);
    return tmp[data1.AttrKey];
  } else {
    return "-";
  }
}

// 查询 设备对应的明细 我的关注数据
function f_HandelQueryListStar() {
  tableData.value = [];
  const params = {
    pageSize: 10000,
    pageIndex: 1,
    classId: currentDeviceData.value.classId,
  };
  GisPointInfoAPI.api_query_device_status_receivejson(params).then(
    ({ data, succeeded }) => {
      if (succeeded) {
        let starData = data.items;
        starData.forEach((item) => {
          if (item.myId) {
            tableData.value.push(item);
          }
        });
      }
    }
  );
}

// 设备上报数据设置
function f_OpenDialogReport() {
  if (!Object.keys(currentDeviceData.value.colAttribute).length) {
    ElMessage.error("暂无相关上报属性！");
    return;
  }
  deviceReportData.value = currentDeviceData.value.colAttribute;
  dialogDeviceReport.visible = true;
}

// 保存 上报数据
function f_HandleSubmitReport() {
  // let checkNum = 0;
  // deviceReportData.value.forEach((item) => {
  //   if (item.IsShow) {
  //     checkNum++;
  //   }
  // });
  // if (checkNum < 4) {
  //   ElMessage.error("至少选择4项上报属性！");
  //   return;
  // }

  let params = {
    id: currentDeviceData.value.id,
    colAttribute: deviceReportData.value,
  };

  DeviceCategoryApi.api_update(params).then(({ data, errors, succeeded }) => {
    if (succeeded) {
      ElMessage.success("提交成功！");
      f_CloseDialog();
      f_HandelQuery();
    }
  });
}

// 批量设置报警值
function f_OpenDialogBatchReport() {
  showType.value = "table";
  // if (showType.value != "table") {
  //   ElMessage.error("请切换列表展示模式，勾选需要批量设置的设备！");
  //   return;
  // }
  setTimeout(() => {
    let tableData = tableRef.value.getSelectionRows();
    if (!tableData.length) {
      ElMessage.error("请先勾选设备!");
      return;
    }
    if (!currentDeviceData.value.alarmAttribute) {
      ElMessage.error("暂无相关批量设置报警值属性！");
      return;
    }

    batchData.value = [];
    currentDeviceData.value.alarmAttribute.forEach((item) => {
      if (currentDeviceData.value.colAttribute) {
        // const isShow = find(currentDeviceData.value.colAttribute, {
        //   AttrKey: item.AttrKey,
        // }).IsShow;
        // console.log(isShow);
        // if (isShow) {
        batchData.value.push(item);
        // }
      }
    });
    dialogBatchSet.visible = true;
  }, 100);
}

// 保存 批量设置报警值
function f_HandleSubmitBatchReport() {
  let tableData = tableRef.value.getSelectionRows();
  let pointIds = [];
  tableData.forEach((item) => {
    pointIds.push(item.pointId);
  });
  let params = {
    pointIds: pointIds,
    alarmSet: batchData.value,
  };

  GisPointInfoAPI.api_batch_alarm_set(params).then(
    ({ data, errors, succeeded }) => {
      if (succeeded) {
        ElMessage.success("提交成功！");
        f_CloseDialog();
        f_HandelQuery();
      }
    }
  );
}

// 返回是否超出报警
function f_Waring(rowIndex, rowData, index) {
  if (rowIndex > -1) {
    let AttrKey = currentDeviceData.value.colAttribute[index].AttrKey;
    if (!AttrKey) return false;
    let alarmData = rowData.alarmData ? rowData.alarmData : "";
    if (!alarmData) return false;
    if (!alarmData.length) {
      return false;
    } else {
      if (alarmData.indexOf(AttrKey) > -1) {
        return true;
      } else {
        return false;
      }
    }
  }
}

// 关闭弹框
function f_CloseDialog() {
  dialog.visible = false;
  dialogBatchSet.visible = false;
  dialogDeviceReport.visible = false;
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 330;
  })();
};

onMounted(() => {
  f_HandelQuery();
  tableHeight.value = window.innerHeight - 330;
});
</script>
<style scoped lang="scss">
:deep .el-menu {
  height: calc(100% - 40px);
  border: none;
}

:deep .el-aside {
  > div {
    padding: 20px 10px;
    cursor: pointer;

    span {
      float: right;
    }
  }

  > div.active {
    color: #32bebd;
  }
}

.add {
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px dashed #dcdcdc;

  :deep .el-tag {
    height: 20px;
    padding: 4px 28px !important;
    font-size: 12px;
    cursor: pointer;
  }
}

:deep .el-sub-menu__title:hover {
  background-color: transparent !important;
}

:deep .el-menu-item:hover {
  background-color: #f5f5f5 !important;
}

.title {
  padding-bottom: 12px;
  color: #32bebd;
  border-bottom: 1px dashed #dcdcdc;
}

.device-icon {
  height: 18px;
  margin-right: 4px;
  vertical-align: middle;
}

b.dot {
  width: 10px;
  height: 10px;
  margin-top: -2px;
  margin-right: 4px;
  border-radius: 50%;
}

b.blue {
  background: rgb(0 195 255);
}

b.red {
  background: rgb(255 102 0);
}

b.grey {
  background: rgb(151 151 151);
}

:deep .el-link.active {
  border-bottom: 1px solid var(--el-link-hover-text-color);
}

:deep .el-main {
  overflow: hidden;

  > div {
    height: calc(100% - 0px);
  }
}

.block {
  height: calc(100% - 60px);
}
.red {
  color: red;
}
</style>
